<template>
  <a-spin tip="Loading..." :spinning="spinning" :delay="delayTime">
    <vue-editor
      v-model="contentResult"
      :editor-options="editorSettings"
      :use-custom-image-handler="true"
      :editor-toolbar="toolbar"
      :placeholder="placeholder"
      @image-added="handleImageAdded"
      @image-removed="handleImageRemoved"
    />
  </a-spin>
</template>

<script>
import { Quill, VueEditor } from "vue2-editor"
import { ImageDrop } from "quill-image-drop-module"
import ImageResize from "quill-image-resize-module"
import { ImagePaste } from "@/utils/image-paste.js"

import fullToolbar from "./full-toolbar.js"
import shortToolbar from "./short-toolbar.js"

import fileApi from "@/api/file"

Quill.register("modules/imageDrop", ImageDrop)
Quill.register("modules/imageResize", ImageResize)
Quill.register("modules/imagePaste", ImagePaste)

export default {
  components: {
    VueEditor,
  },
  model: {
    prop: "defaultValue",
    event: "return-value-back",
  },
  props: {
    defaultValue: {
      type: String,
      default: "",
    },
    all: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  data() {
    const that = this
    return {
      contentResult: this.defaultValue,

      spinning: false,
      delayTime: 500,
      toolbar: this.all ? fullToolbar : shortToolbar,
      editorSettings: {
        modules: {
          imageDrop: true,
          imageResize: {},
          imagePaste: {
            addImageBlob: function (blob, callback) {
              that.spinning = true
              var formData = new FormData()
              formData.append("file", blob)
              that.$http
                .post("/file/file", formData)
                .then((response) => {
                  that.spinning = false
                  if (response.code !== 1) {
                    that.$message.error(response.message)
                    return
                  }
                  callback(response.data.url_800)
                  return
                })
                .catch(() => {
                  that.spinning = false
                })
              return
            },
            contentResult() {
              this.$emit("return-value-back", this.contentResult)
            },
          },
        },
      },
    }
  },
  watch: {
    defaultValue() {
      this.contentResult = this.defaultValue
    },
    contentResult() {
      if (this.contentResult == this.defaultValue) return
      this.$emit("return-value-back", this.contentResult)
    },
  },
  methods: {
    handleImageRemoved: function (image) {
      console.log(image)
    },
    handleImageAdded: function (file, Editor, cursorLocation, resetUploader) {
      const that = this
      this.spinning = true
      const formData = new FormData()
      formData.append("file", file)
      fileApi
        .create(formData)
        .then((response) => {
          that.spinning = false
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          Editor.insertEmbed(cursorLocation, "image", response.data.url_800)
          resetUploader()
          return
        })
        .catch(() => {
          that.spinning = false
        })

      return
    },
  },
}
</script>

<style scoped>
::-webkit-input-placeholder {
  /*Webkit browsers*/
  color: #999;
  font-size: 16px;
}
:-moz-placeholder {
  /*Mozilla Firefox 4 to 8*/
  color: #999;
  font-size: 16px;
}
::moz-placeholder {
  /*Mozilla Firefox 19+*/
  color: #999;
  font-size: 16px;
}
:-ms-input-placeholder {
  /*Internet Explorer 10+*/
  color: #999;
  font-size: 16px;
}
</style>
